import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import '../../im/webchatpage.dart';
import '../../network/Api.dart';
import '../../theme/theme_color.dart';
import '../../utils/provider.dart';
import '../../utils/snack_bar.dart';
import '../../widget/icon_text.dart';

//web消息UI
class MessageWeb extends StatefulWidget {
  const MessageWeb({Key? key}) : super(key: key);

  @override
  State<MessageWeb> createState() => _MessageWebState();
}

class _MessageWebState extends State<MessageWeb> {
  final List _matchmakerList = [];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    getMessageList();
  }

  void getMessageList() async {
    if (Provider.memberId.isEmpty) return;
    //--类型 （1：消息，2：好友，3：群聊，4：粉丝）
    final res = await Api.getInstance().getMessagelist(Provider.memberId, "1");

    if (res['code'] == 0) {
      final data = res['data'];
      if (data != null) {
        List list = data;
        if (list.isNotEmpty == true) {
          setState(() {
            _matchmakerList.addAll(list);
          });
        }
      }
    } else {
      ThemeSnackBar.show(context, res['msg']);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        iconTheme: const IconThemeData(
          color: Colors.white, //修改颜色
        ),
        elevation: 0,
        backgroundColor: Colors.white,
        centerTitle: true,
        title: const Text(
          "消息",
          style: TextStyle(
              color: Colors.black, fontSize: 18, fontWeight: FontWeight.bold),
        ),
        actions: [
          GestureDetector(
              onTap: () {
                // Navigator.of(context).push(MaterialPageRoute(builder: (builder) =>   GroupDetailsPage(widget.groupId,widget.owner,)));
              },
              child: SizedBox(
                  width: 56,
                  height: 56,
                  child: Stack(
                    alignment: Alignment.center,
                    children: [
                      Container(
                        color: Colors.transparent,
                        width: 14,
                        height: 14,
                      ),
                      Icon(
                        Icons.search,
                        color: ThemeColor.textColor,
                        size: 30,
                      ),
                    ],
                  )))
        ],
      ),
      body: _matchmakerList.isNotEmpty
          ? Container(
              child: ListView.builder(
                itemBuilder: (_, index) {
                  if (_matchmakerList.isNotEmpty) {
                    return InkWell(
                      onTap: () {
                        if (_matchmakerList[index]['detailsId']
                            .toString()
                            .isNotEmpty) {
                          Navigator.of(context).push(MaterialPageRoute(
                              builder: (builder) => WebChatPage(
                                  _matchmakerList[index]['detailsId']
                                      .toString())));
                        }
                      },
                      child: _matchmakerList.isNotEmpty
                          ? Container(
                              margin: const EdgeInsets.only(top: 10),
                              padding: const EdgeInsets.only(
                                top: 10.0,
                                bottom: 10.0,
                              ),
                              decoration: const BoxDecoration(
                                border: Border(
                                    bottom: BorderSide(
                                        color: Color(0xffEDEDED), width: 10)),
                              ),
                              child: Container(
                                margin:
                                    const EdgeInsets.only(left: 16, right: 16),
                                child: Row(
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  children: [
                                    Container(
                                        margin: const EdgeInsets.all(5),
                                        child: ClipRRect(
                                          borderRadius:
                                              BorderRadius.circular(5),
                                          child: Image(
                                              image: CachedNetworkImageProvider(
                                                  Provider.fixAvatar(
                                                      _matchmakerList[index]
                                                          ['photoUrl'])),
                                              height: 45,
                                              width: 45,
                                              fit: BoxFit.fill),
                                        )),
                                    Flexible(
                                      child: Container(
                                        // padding: const EdgeInsets.only(top: 6,bottom: 5),
                                        child: Column(
                                          mainAxisAlignment:
                                              MainAxisAlignment.start,
                                          crossAxisAlignment:
                                              CrossAxisAlignment.start,
                                          children: [
                                            Row(
                                              mainAxisAlignment:
                                                  MainAxisAlignment
                                                      .spaceBetween,
                                              children: [
                                                Container(
                                                  margin: const EdgeInsets.only(
                                                      left: 8),
                                                  child: Text(
                                                    _matchmakerList[index]
                                                            ['nickName'] ??
                                                        "",
                                                    style: const TextStyle(
                                                      color: Colors.black,
                                                      fontSize: 14,
                                                    ),
                                                    overflow:
                                                        TextOverflow.ellipsis,
                                                  ),
                                                ),
                                                const Text(
                                                  "21.30",
                                                  style: TextStyle(
                                                      fontSize: 14,
                                                      color: Colors.grey),
                                                ),
                                              ],
                                            ),
                                            Container(
                                              margin: const EdgeInsets.only(
                                                  top: 5, left: 8),
                                              child: Row(
                                                mainAxisAlignment:
                                                    MainAxisAlignment
                                                        .spaceBetween,
                                                children: [
                                                  Container(
                                                      child: Row(
                                                    mainAxisAlignment:
                                                        MainAxisAlignment.start,
                                                    children: [
                                                      Container(
                                                        padding:
                                                            const EdgeInsets
                                                                .only(
                                                                left: 8,
                                                                right: 8,
                                                                top: 1,
                                                                bottom: 1),
                                                        alignment:
                                                            Alignment.center,
                                                        decoration:
                                                            ShapeDecoration(
                                                                shape:
                                                                    RoundedRectangleBorder(
                                                                  borderRadius:
                                                                      BorderRadius
                                                                          .circular(
                                                                              36),
                                                                ),
                                                                color: _matchmakerList[index]
                                                                            [
                                                                            'index'] ==
                                                                        2
                                                                    ? ThemeColor
                                                                        .mainColor
                                                                    : Colors
                                                                        .blue),
                                                        child: _matchmakerList[
                                                                        index]
                                                                    ['index'] >=
                                                                3
                                                            ? IconText(
                                                                " " +
                                                                    _matchmakerList[index]
                                                                            [
                                                                            'index']
                                                                        .toString(),
                                                                icon: const Icon(
                                                                    Icons
                                                                        .group_outlined,
                                                                    color: Colors
                                                                        .white),
                                                                iconSize: 14,
                                                                style:
                                                                    const TextStyle(
                                                                  color: Colors
                                                                      .white,
                                                                  fontSize: 12,
                                                                ),
                                                              )
                                                            : IconText(
                                                                " " +
                                                                    _matchmakerList[index]
                                                                            [
                                                                            'index']
                                                                        .toString(),
                                                                icon: Icon(
                                                                    _matchmakerList[index]['index'] ==
                                                                            2
                                                                        ? Icons
                                                                            .female
                                                                        : Icons
                                                                            .male,
                                                                    color: Colors
                                                                        .white),
                                                                iconSize: 12,
                                                                style:
                                                                    const TextStyle(
                                                                  color: Colors
                                                                      .white,
                                                                  fontSize: 12,
                                                                ),
                                                              ),
                                                      ),
                                                      // getMessageType(body?.type),
                                                    ],
                                                  )),
                                                  Container(
                                                    padding:
                                                        const EdgeInsets.only(
                                                            left: 5,
                                                            right: 5,
                                                            top: 2,
                                                            bottom: 2),
                                                    decoration: BoxDecoration(
                                                      color: Colors.red,
                                                      borderRadius:
                                                          const BorderRadius
                                                              .all(
                                                              Radius.circular(
                                                                  20.0)),
                                                      border: Border.all(
                                                          width: 1,
                                                          color: Colors.white),
                                                    ),
                                                    child: const Text(
                                                      '1',
                                                      style: TextStyle(
                                                          color: Colors.white,
                                                          fontSize: 10),
                                                    ),
                                                  ),
                                                ],
                                              ),
                                            ),
                                          ],
                                        ),
                                      ),
                                    )
                                  ],
                                ),
                              ),
                            )
                          : Container(),
                    );
                  } else {
                    return Container();
                  }
                },
                itemCount: _matchmakerList.length,
              ),
            )
          : SizedBox(
              height: 500,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  Center(
                    child: Image.asset(
                      'images/ic_nomessage.png',
                      width: 175,
                      height: 122,
                    ),
                  ),
                ],
              ),
            ),
    );
  }
}
